<template>
    <!-- CPU使用率 -->
    <div class="container">
        <div ref="chartContainer" style="width:100%;height:100%"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, nextTick } from 'vue';
import * as echarts from 'echarts';
const chartContainer = ref<any>(null);
const chartInstance = ref()
const propsRef = defineProps(['hardwareEcharts'])
const props = ref<any>(propsRef)
const loadData = (value1: any, value2: any) => {
    chartInstance.value = echarts.init(chartContainer.value);

    const option = {
        xAxis: {
            type: 'category',
            data: value1
        },
        yAxis: {
            min: 0,
            max: 100,
            axisTick: {
                show: true,
                alignWithLabel: true,
                interval: 20
            },
            axisLabel: {
                show: true,
                onZero: true,
                formatter: '{value}%'
            }
        },
        series: [
            {
                data: value2,
                type: 'line',
                smooth: true,  // 设置折线平滑
                symbol: 'none',  // 隐藏折点
                lineStyle: {
                    color: '#F24A9B'  // 设置线条颜色为红色
                }
            }
        ]
    };

    chartInstance.value.setOption(option);
};
onMounted(() => {
    if (props.value.hardwareEcharts.ReportTime) {
        loadData(props.value.hardwareEcharts.ReportTime, props.value.hardwareEcharts.NetworkUsage)
    }
})
watch(props, newvalue => {
    loadData(newvalue.hardwareEcharts.ReportTime, newvalue.hardwareEcharts.NetworkUsage
    )

}, {
    deep: true
})
onMounted(() => {
    // loadData(props.value.hardwareReportTime, props.value.hardwareNetworkUsage)
})
</script>

<style scoped lang="less">
:deep(.container .graph-container .container .right-container .no-data[data-v-49ba7211]) {
    padding-top: 0px;
}

.container {
    width: 100%;
    height: 520px;
}
</style>